{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    出货查询
{% endblock %}


{% block meta %}
    
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}"  media="all">
    <link rel="stylesheet" href="{% static 'css/my_search.css' %}">
    <link rel="stylesheet" href="{% static 'css/bulk_delete.css' %}">
    <style>
        .notice_list {
            padding: 50px 60px 0 50px;
        }
        .notice {
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .notice h3 {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .page {
            float: right;
            margin-right: 60px;
        }
        td,th{
                text-align: center;
        }
        .notice_nums {
            width: 114px;
            float: right;
            padding-top: 20px;
            padding-right: 10px;
        }
        .notice_count {
            float: right;
            padding-top: 28px;
            padding-right: 10px;
        }
        .notice_count span {
            font-weight: bold;
            color: #337ab7;
        }
        .notice_nav {
            width: 100%;
            height: 33px;
            padding-top:23px;
            padding-right:59px;
            display: flex;
            flex-direction:row;
            justify-content: space-between;
        }
        form {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="notice">
        <h3>出货通知单<small> 列表</small></h3>
        <a class="btn btn-primary" href="{% url 'create_delivery_order' %}">新增</a>
    </div>

    <div class="notice_nav">
        {% include 'pub/bulk_delete.html' %}
        <form method="post" action="{% url 'query_delivery_order' %}" novalidate>
            <div class="layui-inline" style="width: 24%">
              <label class="layui-form-label" style="width: 39%">MAC地址</label>
              <div class="layui-input-inline" style="width: 61%">
                <input type="text" name="mac_address" class="layui-input">
              </div>
            </div>
            <div class="layui-inline" style="width: 25%">
              <label class="layui-form-label" style="width: 35%">日期范围</label>
              <div class="layui-input-inline" style="width: 65%">
                <input type="text" class="layui-input" id="test6" name="date_rang" placeholder=" - ">
              </div>
            </div>
            <div class="layui-inline" style="width: 23%">
              <label class="layui-form-label" style="width: 35%">审核状态</label>
              <div class="layui-input-inline" style="width: 65%">
                <input type="text" name="Audit_status"  class="layui-input">
              </div>
            </div>
            <div class="layui-inline" style="width: 20%">
              <label class="layui-form-label" style="width: 30%">型号</label>
              <div class="layui-input-inline" style="width: 70%">
                <input type="text" name="model"  autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline" style="width: 8%">
                <button type="submit" class="layui-btn layui-btn-normal submit" style="width: 100% " disabled><i class="layui-icon layui-icon-search"></i>查询</button>
            </div>
        </form>
    </div>

    <div class="table-responsive notice_list">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>通知单号</th>
              <th>发货部门</th>
              <th>发货日期</th>
              <th>收货人</th>
              <th>客户电话</th>
              <th>客户地址</th>
              <th>来源</th>
              <th>数量</th>
              <th style="width: 74px">已完成量</th>
              <th>审核</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {% for obj in notice_query %}
                <tr>
                  <th scope="row">
                      <span class="forloop">{{forloop.counter}}</span>
                      <div><input type="checkbox" style="display: none" class="input_checkbox" value="{{ obj.id }}"></div>
                  </th>
                  <td>{{ obj.notice_number }}</td>
                  <td>{{ obj.delivery_department.department_name }}</td>
                  <td>{{ obj.delivery_date|date:"Y-m-d" }}</td>
                  <td>{{ obj.consignee }}</td>
                  <td>{{ obj.phone }}</td>
                  <td>{{ obj.address }}</td>
                  {% if obj.source == 1 %}
                    <td>线下</td>
                  {% elif obj.source == 2 %}
                    <td>淘宝</td>
                  {% elif obj.source == 3 %}
                    <td>京东</td>
                  {% else %}
                    <td>代理商</td>
                  {% endif %}
                  <td>{{ obj.nums }}</td>
                  <td>{{ obj.finish_nums }}</td>
                  {% if obj.examine == 0 %}
                      {% if request.mac.user.depart_id.all.0.department_name == '系统管理部门' %}
                        <td>
                            <button class="btn btn-info btn-xs examine" content="{{ obj.notice_number }}"  order_id="{{ obj.id }}">
                                <i class="fa fa-pencil-square" aria-hidden="true"></i> 待审核</button>
                        </td>
                      {% else %}
                        <td style="font-weight: bold">待审核</td>
                      {% endif %}
                  {% elif obj.examine == 1 %}
                      {% if request.mac.user.depart_id.all.0.department_name != '系统管理部门' %}
                        <td>
                            <button class="btn btn-danger btn-xs show_examine" content="{{ obj.notice_number }}"  order_id="{{ obj.id }}">
                                <i class="fa fa-pencil-square" aria-hidden="true"></i> 未通过</button>
                        </td>
                      {% else %}
                        <td style="color:red;font-weight: bold">未通过</td>
                      {% endif %}
                  {% else %}
                    <td style="color:#5bc0de;font-weight: bold">通过</td>
                  {% endif %}
                  {% if obj.status == 0 %}
                    <td style="color: red;font-weight: bold">待处理</td>
                  {% else %}
                    <td style="color:#EEB422;font-weight: bold">备货中...</td>
                  {% endif %}
                  <td>
                      {% if obj.examine != 2 %}
                      <a href="{% url 'edit_delivery_order'  obj.id %}" class="btn btn-info btn-xs">
                          <i class="fa fa-pencil-square" aria-hidden="true"></i> 修改</a>
                      |
                      <a href="{% url 'details_delivery_order'  obj.id %}" class="btn btn-info btn-xs">
                          <i class="fa fa fa-file-text" aria-hidden="true"></i> 详情</a>
                      {% else %}
                          <a href="{% url 'details_delivery_order'  obj.id %}" class="btn btn-info btn-xs">
                              <i class="fa fa-file-text" aria-hidden="true"></i> 详情</a>
                      {% endif %}
                  </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>

    <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            {{ pages | safe }}
          </ul>
        </nav>
    </div>

    <div class="notice_nums">
        <select id="notice_nums" name="notice_nums" class="form-control">
              <option value="5">每页5条</option>
              <option value="10">每页10条</option>
              <option value="15">每页15条</option>
              <option value="20">每页20条</option>
              <option value="25">每页25条</option>
              <option value="30">每页30条</option>
              <option value="40">每页40条</option>
        </select>
    </div>

    <div class="notice_count">
        总共 <span>{{ notice_count }}</span> 条通知单
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'js/bulk_delete.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}" charset="utf-8"></script>
    <script>
        layui.use(['laydate', 'layer'], function(){
          var laydate = layui.laydate;
          var layer = layui.layer;
          //日期范围
          laydate.render({
            elem: '#test6'
            ,range: true
          });
          // 出货单审核
          $('.examine').click(function () {
              layer.open({
                type: 2,
                area: ['517px', '286px'],
                maxmin: false,
                fixed: false,
                resize: false,
                title: '审核',
                shadeClose: false,
                content: ["{% url 'order_examine' %}"+'?'+ 'order_id='+$(this).attr('order_id'), 'no'],
                end: function () {
                    //关闭时做的事情
                    window.location.reload()
                }
              })
          })
            // 查看审核未通过的原因
          $('.show_examine').click(function () {
              layer.open({
                type: 2,
                area: ['517px', '286px'],
                maxmin: false,
                fixed: false,
                resize: false,
                title: '查看审核',
                shadeClose: false,
                content: ["{% url 'show_examine' %}"+'?'+ 'order_id='+$(this).attr('order_id'), 'no'],
                end: function () {
                    //关闭时做的事情
                }
              })
          })

            // 批量删除
          $('.define_delete').click(function () {
            var list = []
            var $id_list = $('.input_checkbox:checked')
            $.each($id_list, function (index, item) {
                list.push($(item).val())
            })
            $.ajax({
                url: '{% url "bulk_delete" %}',
                type: 'POST',
                data: {'mac_details_id_list':list, 'url': "{% url 'query_delivery_order' %}"},
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        layer.msg('删除成功', {icon: 1, time: 2000}, function () {
                            window.location.replace("{% url 'query_delivery_order'%}");
                        })
                    }else {
                        layer.msg('请选择要删除项', {icon: 3, time:1500})
                    }
                }
            })
        })

        })
    </script>

    <script> 
        var notice_page_size = "{{ notice_page_size }}";
        var $option_list = $('#notice_nums option');
        $.each($option_list,function(i, Ele){
            if (notice_page_size === Ele.getAttribute('value')) {
                Ele.setAttribute('selected','selected')
            }
        });
        $('#notice_nums').change(function () {
            window.location.replace("{% url 'query_delivery_order'%}"+"?"+"notice_page_size="+$(this).find('option:selected').val());
        })
     //绑定模态框展示的方法 
    $('.bs-example-modal-sm').on('show.bs.modal', function (event) {  
        var button = $(event.relatedTarget) // 触发事件的按钮  
        var recipient = button.data('whatever') // 解析出whatever内容  
        var modal = $(this)  //获得模态框本身
        modal.find('.modal-title').text('删除用户')  // 更改将title的text
        modal.find('.modal-footer a').attr('href', recipient)  
    })  
    </script>
    <script>
        {#var $inputEles = $('form input')#}
         $('form input').on('keyup mouseup', function () {
            $.each($('form input'), function (index, Ele) {
                if ($(Ele).val() !== ''){
                    $('.submit').removeAttr('disabled')
                    return false
                }else {
                    $('.submit').attr('disabled', 'disabled')
                }
            })
        })

         $('#test6').click(function () {
            $('.laydate-footer-btns span').click(function () {
                $.each($('form input'), function (index, Ele) {
                    if ($(Ele).val() !== ''){
                        $('.submit').removeAttr('disabled')
                        return false
                    }else {
                        $('.submit').attr('disabled', 'disabled')
                    }
                })
            })
        })

    </script> 
{% endblock %}
